<template>
    <pageHeader title="文章列表"></pageHeader>
    <el-form ref="ruleFormRef" :model="Article" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize"
        status-icon>
        <el-form-item label="文章标题" prop="article_title">
            <el-input v-model="Article.article_title" />
        </el-form-item>
        <el-form-item label="背景图" prop="article_backimg">
            <el-upload class="upload-demo" :class="state.hidden ? 'none' : ''" list-type="picture-card"
                :data="state.aliyunData" :before-upload="beforeUpload" :on-remove="() => state.hidden = false" :limit="1"
                :on-preview="() => state.showPreview = true" :action="config.aliyunOss.bucketUrl">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>

            <el-dialog v-model="state.showPreview">
                <img w-full :src="Article.article_backimg" alt="Preview Image" />
            </el-dialog>
        </el-form-item>
        <el-form-item label="分类" prop="categories_id">
            <el-select multiple v-model="Article.categories_id" placeholder="请选择文章分类">
                <el-option v-for="item, index in state.categoriesList" :key="index" :label="item.categories_title"
                    :value="item.categories_id" />
            </el-select>
        </el-form-item>
        <el-form-item label="标签" prop="tag_id">
            <!-- <el-select-v2 v-model="Article.tag_id" placeholder="Activity count" /> -->
        </el-form-item>



        <el-form-item label="文章内容" prop="article_text">
            <wangeditor ref="wangEditor" @html="setHtml"></wangeditor>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                发 布
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重 置</el-button>
        </el-form-item>
    </el-form>
</template>
  
<script lang="ts" setup>
import { reactive, ref, onBeforeUnmount, shallowRef, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import wangeditor from '@/components/admin/wangeditor.vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { ElMessage } from 'element-plus'
import { VagueOject } from '@/types/common'
import http, { } from "@/utils";
import { config } from "@/config";
import 'element-plus/dist/index.css'

interface ArticleType {
    article_backimg: string;
    article_text: string;
    article_title: string;
    categories_id: string[];
    tag_id: string[];
}

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const wangEditor = ref();
const Article = reactive<ArticleType>({
    article_backimg: "",
    article_text: "",
    article_title: "",
    categories_id: [],
    tag_id: [],
})
const state: {
    aliyunData: VagueOject,
    hidden: boolean,
    showPreview: boolean,
    categoriesList: VagueOject[]
    // fileList: UploadUserFile[]
} = reactive({
    aliyunData: {},
    hidden: false,
    showPreview: false,
    categoriesList: []
    // fileList: []
})


onMounted(() => {
    ElMessage({
        message: 'this is a message.'
    })
    getCategoriesList()
})

const getCategoriesList = async () => {
    state.categoriesList = await http.categoriesList();
}

const rules = reactive<FormRules<ArticleType>>({
    article_title: [
        { required: true, message: '请输入标题', trigger: 'blur' },
        { min: 1, max: 100, message: '标题1~100间', trigger: 'blur' },
    ],
    article_text: [
        {
            required: true,
            message: '请输入内容',
            trigger: 'change',
        },
    ],
    article_backimg: [
        {
            required: true,
            message: '请选择图片',
            trigger: 'change',
        },
    ],
    categories_id: [
        {
            required: true,
            message: '请选择分类',
            trigger: 'change',
        },
    ],
    tag_id: [
        {
            required: true,
            message: '请选择标签',
            trigger: 'change',
        },
    ],
})

const beforeUpload: UploadProps['beforeUpload'] = async (rawFile) => {
    state.hidden = true;
    let res = await http.aliyunToken()
    res.key = rawFile.name
    state.aliyunData = res;
    Article.article_backimg = `${config.aliyunOss.bucketUrl}/${rawFile.name}`

    // state.fileList.push({
    //     name: rawFile.name,
    //     url: Article.article_backimg
    // })

}

const setHtml = (content: string) => {
    Article.article_text = content
}

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid && Article.article_text != "<p><br></p>") {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    wangEditor.value.editorRef.setHtml("<p><br></p>")

}

</script>

<style lang="less" scoped>
.upload-demo {
    width: 50%;
}

/deep/ .none {
    .el-upload--picture-card {
        display: none !important;
    }
}
</style>